<template>
  <div class="course-detail-tips">

    <div class="tips-content">
      <dl v-for="(item, index) in recommend" :key="item.id">
        <dt @click="toQuestionDetail(item.id)">{{ index+1 + '、' + item.title }}</dt>
      </dl>
    </div>

    <div v-if="recommend.length === 0 || recommend === null" class="list-empty">
      <p>暂无相关推荐</p>
    </div>

  </div>
</template>
<script>
export default {
  props: {
    recommend: {
      type: Array,
    }
  },
  methods: {
    toQuestionDetail(questionId){
      let url = this.$router.resolve({
        path: '/question/'+ questionId,
      });
      window.open(url.href, '_blank')
    }
  }
}
</script>
<style lang="stylus" scoped>
  .course-detail-tips
    padding: 24px 20px 10px;
    background-color: #fff;
    box-shadow: 0 8px 16px 0 rgba(7,17,27,.1);
    border-radius: 12px;
    .learn-info
      padding-bottom: 12px;
      font-size: 12px;
      color: #545c63;
      & > p
        margin-bottom: 9px;
        line-height: 24px;
        &.latest
          margin-top: 24px;
          line-height: 1;
        .percent
          font-size: 14px;
          font-weight: 700;
        .duration
          float: right;
    .tips-content
      dl
        margin-top: 10px;
        dt
          margin-bottom: 20px;
          font-size: 15px;
          cursor pointer
          line-height 25px
          &:hover
            color: #1fad4e;
        dd
          color: #545c63;
          font-size: 12px;
          line-height: 24px;
  .list-empty
    padding: 10px 0;
    text-align: center;
</style>
